import {View, Text, Button as Button2,  TextInput, TouchableOpacity, StyleSheet,PixelRatio,Alert ,Image,Pressable,ImageBackground} from 'react-native';
import { styles} from '../MyStyle';
import {MyButton01, showToast} from '../UiComponents';

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';
import NativeLocalStorage from '../specs/NativeLocalStorage';

import { BackButton } from '../UiComponents';





import {
  createStaticNavigation,
  useNavigation,
} from '@react-navigation/native';
// import { Center } from 'native-base';

import { Center, Square, Circle } from 'native-base';

import { Loading } from '../Loading';
import { Flex } from '@ant-design/react-native';
import { Person } from './myclasses';

// https://redux.js.org/introduction/getting-started
// npm install redux react-redux


export function DetailsScreen23() {
  return (<Center  bg="#ffffff">
 <Text>内容居中显示1</Text>

 <Circle size="100px" bg="red.900" color="white">
        Hello
      </Circle>
      <Circle size="100px" bg="blue.900">
  深蓝色背景
</Circle>



  </Center>);
}




export function DetailsScreen20() {
  return (
    <Flex justify="center" align="center"
    direction='column'
    style={{ height: 100, backgroundColor: 'gold' }}>
      <Text>内容居中显示</Text>
      <Text>内容居中显示1</Text>
    </Flex>
  );
}


export function DetailsScreen2() {


  const person = new Person('Alice3555', 25);


  const  handle01 =()=>{
 showToast('123')

  }

  const  handle02 =()=>{
    showToast('1231222')
     }



 // 定义按钮点击事件
 const handleBackPress = (text:string) => {

  // person.hi();

  person.hello(12345);
  person.hello(['1','2','3']);
  // NativeLocalStorage?.finishActivity()
  // Alert.alert('Back Button Pressed', `Text: ${text}`);
};

  return <ImageBackground 
  source={require('../assets/bg.png')}
  style={{
padding:0/3.5,
  flex: 1,
backgroundColor:"#fff0000",
  }}>

      <View style={{
        flex:1,
        position:"absolute",
        width:"80%",
        bottom:"10%",
        right:"10%",
        top:"10%",
        height:"80%",
        borderRadius:12,
        opacity:0.5,
        backgroundColor:"#ff0000",
        alignItems:"center",
        justifyContent: 'center', // 水平居中
        paddingTop:30/3.5,
      }}>

<View style={{
        width:"70%",
        height:"100%",
        backgroundColor:"#ffffff",
        flexDirection:"column", 
        justifyContent:"flex-start",
        alignItems:"center",
        borderRadius: 20/3.5, // 圆角半径
      }}>
 <Loading>
 </Loading>

 <Text>123</Text>
 <View style={{height:200}}></View>


<View style={{flexDirection:"row"}}>
 <MyButton01 text="打开首页" onPress={handle01}></MyButton01>
 <View style={{width:200}}></View>
 <MyButton01 text="查看渲染记录" onPress={handle02}></MyButton01>
 </View>


  </View>

  </View>

  <View style={styles.content1}>
    <BackButton onPress={handleBackPress}
    />
     </View>
  </ImageBackground>
}


